<template>
  <div
    v-if="visible"
    class="warningTabs-container"
    id="warningTabs-container"
    :class="single ? 'single-managerTabs-contanier' : 'managerTabs-contanier'"
    @click.stop
  >
    <div class="managerTabs-contanier-header">
      <div class="managerTabs-contanier-title">{{ title }}</div>
      <div style="display: flex; align-items: center">
        <div class="buttonStyle" :style="single ? '' : 'top: -50%;left: 41%;'">
          <el-button
            class="searchButton"
            type="primary"
            @click.stop="handleQuery"
            >搜索</el-button
          >
        </div>
        <div class="close" @click.stop="closeInfoTab">
          <el-icon :size="30" color="#c5e8ea"><Close /></el-icon>
        </div>
      </div>
    </div>
    <div class="managerTabs-contanier-line" style="width: 100%"></div>
    <div class="managerTabs-content">
      <el-form
        :model="queryParams"
        ref="queryRef"
        class="managerTabs-form-content"
      >
        <div
          :style="
            single
              ? 'width: 100%;display: flex;flex-wrap: wrap;'
              : 'width: 100%;display: flex;'
          "
        >
          <el-form-item
            label="所属人"
            prop="applyName"
            label-width="68"
            style="width: 230px"
            class="arrange"
          >
            <el-input
              v-model="queryParams.applyName"
              placeholder="请输入所属人"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="生效状态"
            prop="alartType"
            style="width: 230px; height: 34px"
            class="arrange"
          >
            <el-select
              v-model="flightRouteStatusLabel"
              class="construction"
              :teleported="false"
              @change="changeFlightRouteStatus"
              placeholder="请选择生效状态"
              clearable
            >
              <el-option
                v-for="dict in flightRouteStatusList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="航线状态"
            prop="alartType"
            style="width: 230px; height: 34px"
            class="arrange"
          >
            <el-select
              v-model="RouteUseStatusLabel"
              class="construction"
              :teleported="false"
              @change="changeRouteUseStatus"
              placeholder="请选择生效状态"
              clearable
            >
              <el-option
                v-for="dict in RouteUseStatusList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="航线类型"
            prop="parentAircraftType"
            style="width: 230px; height: 34px"
            class="arrange"
          >
            <el-select
              v-model="queryParams.parentAircraftType"
              class="construction"
              :teleported="false"
              placeholder="请选择航线类型"
              @change="parentAircraftTypeFun"
              clearable
            >
              <el-option
                v-for="dict in parentAircraftTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label=""
            prop="status"
            style="width: 150px; height: 34px"
            class="arrange"
          >
            <el-select
              v-model="queryParams.aircraftType"
              class="construction"
              :teleported="false"
              placeholder="请选择航线类型"
              clearable
            >
              <el-option
                v-for="dict in aircraftTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        :height="single ? '406' : '407'"
        :style="single ? 'margin-bottom: 20px;' : 'margin-bottom: 1%'"
        :header-cell-style="headerStyle"
        class-name="table-container-content"
      >
        <el-table-column
          label="序号"
          width="70"
          type="index"
          :index="indexMethod"
          align="center"
        />
        <el-table-column
          label="显隐"
          :show-overflow-tooltip="true"
          width="120"
          prop="height"
          align="center"
        >
          <template #default="{ row }">
            <el-switch v-model="row.isShow" @change="changeRouteShow(row)" />
          </template>
        </el-table-column>
        <el-table-column
          label="航线名称"
          min-width="120"
          :show-overflow-tooltip="true"
          prop="routeName"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="所属人"
          min-width="140"
          :show-overflow-tooltip="true"
          prop="applyName"
          align="center"
        />
        <el-table-column
          label="航线类型"
          :show-overflow-tooltip="true"
          min-width="120"
          prop="parentAircraftType"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="row.parentAircraftType === 'drone_type'">无人机</div>
            <div v-if="row.parentAircraftType === 'general_aviation_type'">
              通航
            </div>
            <div v-if="row.parentAircraftType === 'other_aircraft_type'">
              其他
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          :show-overflow-tooltip="true"
          min-width="120"
          prop="approvalStatus"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="row.flightRouteStatus === 0">待生效</div>
            <div v-if="row.flightRouteStatus === 1">生效中</div>
            <div v-if="row.flightRouteStatus === 2">已失效</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :cockpit="true"
        layout="total, prev, pager,next, jumper"
        class="paginationClass"
        v-model:page="queryCurrent.pageNum"
        v-model:limit="queryCurrent.pageSize"
        @pagination="getListFun"
      />
    </div>
  </div>
</template>
<script setup>
import { defineProps, inject, onMounted, reactive, ref, toRefs } from "vue";
import { getAirspaceStatus } from "@/api/airSpace/airSpaceSetUp";
import { getRouteList } from "@/api/cockpit/flyPlan";
import { airlineFormat } from "@/utils/airlineFromat";
const total = ref(1);
const time = ref();
const flightRouteStatusList = ref([]);
const RouteUseStatusList = ref([]);
const parentAircraftTypeList = ref([]);
const aircraftTypeList = ref([]);
const currentLine = ref({});
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  single: {
    type: Boolean,
    default: false,
  },
});
const flightRouteStatusLabel = ref("1");
const RouteUseStatusLabel = ref("");
const data = reactive({
  queryParams: {
    applyName: null,
    flightRouteStatus: null,
    parentAircraftType: null,
    aircraftType: null,
    routeUseStatus: null,
  },
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
  tableData: [],
});
const { queryParams, queryCurrent, tableData } = toRefs(data);
const emits = defineEmits(["routeVisibleClose", "drawLine", "removeLine"]);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

function headerStyle({ row, rowIndex }) {
  if (rowIndex === 0) {
    if (props.single) {
      return {
        backgroundColor: "rgba(0, 114, 202, 0.3) !important",
        color: "#ffffff",
        fontSize: "14px",
      };
    } else {
      return {
        backgroundColor: "rgba(0, 114, 202, 0.3) !important",
        color: "#ffffff",
        fontSize: "16px",
      };
    }
  }
}

// 列表查询
function getListFun(val) {
  if (val === "ZHONGSHU") {
    queryParams.value["flightArea"] = 1;
    flightRouteStatusLabel.value = getFlightRouteStatus(1);
    queryParams.value.flightRouteStatus = 1;
  } else if (val === "SHENGXIAO") {
    queryParams.value["flightArea"] = 1;
    flightRouteStatusLabel.value = getFlightRouteStatus(1);
    queryParams.value.flightRouteStatus = 1;
  } else if (val === "DAIYONG") {
    queryParams.value["flightArea"] = 1;
    flightRouteStatusLabel.value = getFlightRouteStatus(0);
    queryParams.value.flightRouteStatus = 0;
  }
  getRouteList(queryParams.value).then((res) => {
    if (res.code === 200) {
      total.value = res.total;
      // tableData.value = res.rows;
      console.log(tableData.value);
      tableData.value = res.rows.map((item) => {
        // item["flyingHandList"] = [];
        // if (item.flyingHand) {
        //   item["flyingHandList"] = item.flyingHand.split(",");
        // }
        item.isShow = false;
        return item;
      });
    }
  });
}

function getFlightRouteStatus(val) {
  if (val === 0) {
    return "待生效";
  } else if (val === 1) {
    return "生效中";
  } else if (val === 2) {
    return "已失效";
  }
}

function changeFlightRouteStatus() {
  queryParams.value.flightRouteStatus = flightRouteStatusLabel.value;
}

function changeRouteUseStatus() {
  queryParams.value.routeUseStatus = RouteUseStatusLabel.value;
}

function parentAircraftTypeFun() {
  queryParams.value.aircraftType = null;
  if (!queryParams.value.parentAircraftType) return;
  getAirspaceStatus(queryParams.value.parentAircraftType).then((res) => {
    if (res.code === 200) {
      aircraftTypeList.value = res.data;
    }
  });
}

async function getFlightRouteStatusList() {
  await getAirspaceStatus("flight_route_status").then((res) => {
    if (res.code === 200) {
      flightRouteStatusList.value = res.data;
      // alarmTypeList.value.unshift({
      //   dictValue: null,
      //   dictLabel: "全部",
      // });
    }
  });

  await getAirspaceStatus("aircraft_type").then((res) => {
    if (res.code === 200) {
      parentAircraftTypeList.value = res.data;
    }
  });

  await getAirspaceStatus("route_use_status").then((res) => {
    if (res.code === 200) {
      RouteUseStatusList.value = [
        { dictLabel: "全部", dictValue: "" },
        ...res.data,
      ];
    }
  });
}
// 搜索
function handleQuery() {
  getListFun();
}

// 重置
function resetQuery() {
  queryParams.value = {
    aircraftId: null,
    flyingHand: null,
    alartType: null,
    status: null,
    alartStartTime: null,
    alartEndTime: null,
  };
  time.value = null;
  queryCurrent.value.pageNum = 1;
  queryCurrent.value.pageSize = 10;
  getListFun();
}

// 关闭弹窗
const closeInfoTab = () => {
  if (isShowDetail.value) {
    changeIsShowDetail();
    emits("removeLine");
  }
  queryParams.value = {
    aircraftId: null,
    flyingHand: null,
    alartType: null,
    status: null,
    alartStartTime: null,
    alartEndTime: null,
  };
  time.value = null;
  queryCurrent.value.pageNum = 1;
  queryCurrent.value.pageSize = 10;
  emits("routeVisibleClose");
};

// 控制航线显隐
const changeRouteShow = (data) => {
  // clearOther();
  // currentLine.value = data;
  if (data.isShow) {
    if (!isShowDetail.value) changeIsShowDetail();
    let airlineInfo = airlineFormat(data, "airline");
    console.log(airlineInfo);
    emits("drawLine", [airlineInfo]);
  } else {
    let id = data.airspaceApplyId;
    if (!isShowDetail.value) changeIsShowDetail();
    emits("removeLine", [id]);
  }
};

// 排他
const clearOther = () => {
  // currentLine.value.isShow = false;
  // emits("removeLine");
};

// -----------------------------------------    inject    --------------------------------------------------
const changeIsShowDetail = inject("changeIsShowDetail");
const isShowDetail = inject("isShowDetail");

defineExpose({
  getListFun,
});

onMounted(() => {
  getFlightRouteStatusList();
  // getListFun();
  // getAlarmType();
  // getAlarmStatusList();
});
</script>
<style lang="scss" scoped>
.single-managerTabs-contanier {
  position: absolute;
  left: 25%;
  top: -7%;
  transform: translate(-50%, 20%);
  z-index: 100;
  width: 38%;
  height: 670px;
  padding: 12px 19px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 0.5s linear infinite;
  -webkit-animation: move_5 0.5s ease 1 forwards;
  /* 背景模糊化 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* filter: blur(5px); 内容全部模糊化 */

  .statusOne {
    width: 102px;
    height: 29px;
    background: #333333;
    border: 1px solid #cccccc;
    font-size: 12px;
    padding: 2px 15px;
  }

  .statusTwo {
    width: 102px;
    height: 29px;
    background: #987200;
    border: 1px solid #ffc000;
    font-size: 12px;
    padding: 2px 15px;
  }

  .managerTabs-contanier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .buttonStyle {
      height: 33px;
      //position: absolute;
      //top: 20%;
      //left: 71%;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
    }

    .managerTabs-contanier-title {
      color: #00fcff;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      letter-spacing: 0.1rem;
    }
    .close {
      width: 49px;
      height: 49px;
      position: relative;
      //top: -10px;
      top: 9px;
      right: -15px;
      cursor: pointer;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }
  }
  .managerTabs-contanier-line {
    width: 2000px;
    height: 1px;
    border: 1px solid #00fcff;
    opacity: 0.3;
    margin-bottom: 20px;
  }
  .managerTabs-content {
    //border: 1px red solid;
    //display: flex;
    //align-items: center;
    //justify-content: space-between;

    .managerTabs-form-content {
      //display: flex;
      //justify-content: space-between;
    }

    .arrange {
      margin-right: 24px;
      display: flex;
      align-items: center;

      :deep .el-input__inner {
        color: #ffffff;
      }

      .construction {
        :deep .el-popper.is-pure {
          //background: none;
        }

        :deep .el-input__suffix {
          color: #fff;
        }
        :deep .el-select-dropdown {
          width: 100% !important;
          background-color: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select__popper.el-popper .el-popper__arrow::before {
          background: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background: #44aeff;
          color: #fff;
        }
        :deep .el-select-dropdown__item.selected {
          color: #fff !important;
        }
        :deep .el-select__caret {
          color: #fff !important;
        }
        :deep .el-select-dropdown__item {
          color: rgba(255, 255, 255, 0.65);
        }
        :deep .popper__arrow {
          display: none;
        }
      }

      .dataTimeConstruction {
        width: 120%;
        height: 300px;

        :deep .el-popper.is-pure {
          //background: none;
        }

        //图标样式
        :deep .el-icon {
          color: #fff;
        }

        //头部样式
        :deep .el-date-picker__header-label {
          color: #fff;
          font-size: 18px;
        }

        // 星期样式
        :deep .el-date-table th {
          color: #fff;
        }
        // 时间选择器层样式
        :deep .el-picker-panel {
          z-index: 2007;
          color: #fff;
          background: rgba(30, 84, 128, 0.8);
          border: 1px solid rgba(29, 128, 218, 1);
        }
      }
    }

    //下拉框背景色
    :deep .el-popper.is-light.mySelectStyle {
      background-color: rgba(0, 136, 255, 0.1) !important;
      border: 1px solid #254277 !important;
    }

    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form-item--default .el-form-item__label {
      //width: 100px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    :deep .el-form-item--default .el-form-item__content {
      width: 300px;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-input__wrapper {
      display: inline-flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      padding: 1px 11px;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: none;
    }

    .buttonStyle {
      height: 33px;
      //position: absolute;
      //top: 20%;
      //left: 71%;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
    }
  }
  .table-container {
    position: relative;
    //top: 10px;
    height: 440px;

    .table-viewLook {
      width: 19px;
      height: 22px;
      cursor: pointer;
    }
    .tag {
      border-radius: 2px;
      font-size: 12px;
      padding: 2px 15px;
    }
    .tag1 {
      border: 1px rgba(255, 192, 0, 1) solid;
      background-color: rgba(255, 192, 0, 0.3);
    }
    .tag2 {
      border: 1px rgba(51, 51, 51, 1) solid;
      background-color: rgba(51, 51, 51, 0.3);
    }
  }

  :deep .el-table__inner-wrapper::before {
    height: 0px;
  }
  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }
  :deep .el-table th {
    background-color: transparent !important;
    border: none;
    height: 36px;
    font-weight: 400;
  }
  :deep .el-table tr {
    background-color: transparent !important;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
    font-size: 12px;
    color: #ffffff;
  }
  :deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

  :deep .el-table__row td {
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
  }

  //去掉表格内的线
  :deep .el-table th,
  :deep .el-table td {
    //border-bottom: none !important;
  }
}

.managerTabs-contanier {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 20%);
  z-index: 100;
  width: 1400px;
  height: 647px;
  padding: 25px 34px;
  border-radius: 7px;
  background-color: rgba(9, 27, 35, 0.8);
  border: 0.6px rgba(255, 255, 255, 0.6) solid;
  animation: rotate 2s linear infinite;
  -webkit-animation: move_4 2s ease 1 forwards;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  .statusOne {
    width: 102px;
    height: 29px;
    background: #333333;
    border: 1px solid #cccccc;
    font-size: 12px;
    padding: 2px 15px;
  }

  .statusTwo {
    width: 102px;
    height: 29px;
    background: #987200;
    border: 1px solid #ffc000;
    font-size: 12px;
    padding: 2px 15px;
  }

  .managerTabs-contanier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .buttonStyle {
      height: 33px;
      //position: absolute;
      //top: 20%;
      //left: 71%;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
        cursor: pointer;
      }
    }

    .managerTabs-contanier-title {
      color: #00fcff;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      letter-spacing: 0.1rem;
    }
    .close {
      width: 49px;
      height: 49px;
      position: relative;
      right: -17px;
      top: 9px;

      img {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }
    }
  }
  .managerTabs-contanier-line {
    width: 100%;
    height: 1px;
    border: 1px solid #00fcff;
    opacity: 0.3;
    margin-bottom: 20px;
  }
  .managerTabs-content {
    display: flex;
    flex-wrap: wrap;

    .managerTabs-form-content {
      display: flex;
      justify-content: space-between;
    }

    .arrange {
      margin-right: 38px;
      display: flex;
      align-items: center;

      :deep .el-input__inner {
        color: #ffffff;
      }
      .construction {
        :deep .el-popper.is-pure {
          //background: none;
        }

        :deep .el-input__suffix {
          color: #fff;
        }
        :deep .el-select-dropdown {
          width: 100% !important;
          background-color: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select__popper.el-popper .el-popper__arrow::before {
          background: rgba(9, 27, 35, 0.95);
        }
        :deep .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background: #44aeff;
          color: #fff;
        }
        :deep .el-select-dropdown__item.selected {
          // background: transparent !important;
          color: #fff !important;
        }
        :deep .el-select__caret {
          color: #fff !important;
        }
        :deep .el-select-dropdown__item {
          color: rgba(255, 255, 255, 0.65);
        }
        :deep .popper__arrow {
          display: none;
        }
      }
    }

    //下拉框背景色
    :deep .el-popper.is-light.mySelectStyle {
      background-color: rgba(0, 136, 255, 0.1) !important;
      border: 1px solid #254277 !important;
    }

    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    :deep .el-date-editor .el-range__icon {
      width: 22px;
    }
    :deep .el-date-editor .el-range-input {
      width: 41%;
    }
    :deep .el-date-editor .el-range-input {
      color: #ffffff;
    }

    :deep .el-form-item--default .el-form-item__label {
      //width: 100px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    :deep .el-form-item--default .el-form-item__content {
      width: 300px;
      background: rgba(26, 42, 33, 0.2) !important;
      border: 1px solid #44aeff;
    }
    :deep .el-input__wrapper {
      display: inline-flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      padding: 1px 11px;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      transition: none;
    }

    .buttonStyle {
      height: 33px;
      //position: absolute;
      //top: 20%;
      //left: 71%;

      .searchButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(0, 168, 255, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
      }
      @keyframes rotate {
        0% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
        50% {
          border: 0.8px #ffffff solid;
        }
        100% {
          border: 0.6px rgba(255, 255, 255, 0.4) solid;
        }
      }
      .refreshButton {
        width: 107px;
        height: 33px;
        color: white;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
        background-color: rgba(198, 149, 0, 0.6);
        border: 0.6px rgba(255, 255, 255, 0.6) solid;
        border-radius: 0px 5px 0px 5px;
        animation: rotate 2s linear infinite;
      }
    }
  }
  .table-container {
    position: relative;
    width: 100%;

    .table-viewLook {
      width: 19px;
      height: 22px;
    }
    .tag {
      border-radius: 2px;
      font-size: 12px;
      padding: 2px 15px;
    }
    .tag1 {
      border: 1px rgba(255, 192, 0, 1) solid;
      background-color: rgba(255, 192, 0, 0.3);
    }
    .tag2 {
      border: 1px rgba(51, 51, 51, 1) solid;
      background-color: rgba(51, 51, 51, 0.3);
    }
  }

  :deep .el-table__inner-wrapper::before {
    height: 0px;
  }
  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }
  :deep .el-table th {
    background-color: transparent !important;
    border: none;
    height: 36px;
    font-weight: 400;
  }
  :deep .el-table tr {
    background-color: transparent !important;
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
    font-size: 18px;
    color: #ffffff;
  }
  :deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

  :deep .el-table__row td {
    border-bottom: 1px rgba(242, 242, 242, 0.2) dashed !important;
  }
}

@-webkit-keyframes move_4 {
  0% {
    -webkit-transform: translateX(1000px) scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes move_5 {
  0% {
    -webkit-transform: translateX(0px) scale(0);
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
  50% {
    border: 0.8px #ffffff solid;
  }
  100% {
    border: 0.6px rgba(255, 255, 255, 0.4) solid;
  }
}
</style>

<style lang="scss">
#warningTabs-container {
  position: absolute;
  z-index: 101;

  .el-popper.is-light,
  .el-popper.is-pure {
    left: 0 !important;
    //background-color: rgba(9, 27, 35, 0.95) !important;

    .el-picker-panel.el-date-range-picker {
      background-color: transparent !important;
      color: #fff;

      .el-picker-panel__body-wrapper {
        background-color: rgba(9, 27, 35, 0.95) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        .available.in-range {
          .el-date-table-cell {
            background-color: rgba(255, 255, 255, 0.3) !important;
          }
        }
      }

      .el-picker-panel__footer {
        background-color: rgba(9, 27, 35, 0.8) !important;

        .el-button {
          color: #fff;
          background-color: rgba(9, 27, 35, 0.5) !important;
        }
      }
    }
  }
}
</style>
